import { Story, Canvas } from '@storybook/addon-docs';

# Custom Sorting - sortFunction

By default RDT uses `Array.sort`, however, if you wish to override the internal sorting you can instead pass in your own sorting function into the `sortFunction` property. The callback signature will give you access to RDT's internal sorting properties. Here is an example using plain old `Array.sort`;

- `rows` your data rows
- `selector` is the function you defined on your column.selector. We're going to call this function and pass in the row data in the example below.
- `direction` RDT's current sorting position.

```js
const customSort = (rows, selector, direction) => {
 return rows.sort((rowA, rowB) => {
  // use the selector function to resolve your field names by passing the sort comparitors
  const aField = selector(rowA)
  const bField = selector(rowB)

  let comparison = 0;

  if (aField > bField) {
   comparison = 1;
  } else if (aField < bField) {
   comparison = -1;
  }

  return direction === 'desc' ? comparison * -1 : comparison;
 });
};

...
<DataTable ... sortFunction={customSort} />
```

Or maybe you prefer to use something like lodash orderBy:

```js
const customSort = (rows, selector, direction) => {
	return orderBy(rows, selector, direction);
};

...
<DataTable ... sortFunction={customSort} />
```

<Canvas>
	<Story id="sorting-custom-sort--custom-sort" />
</Canvas>
